import React, { useState } from 'react';
import { Card, Row, Col, } from 'antd';
import ReactEcharts from 'echarts-for-react';
 
const BingEch = (props) => {
    const [sales, setSales] = useState([5, 20, 36, 10, 10, 20]);
    const [stores, setStores] = useState([15, 120, 36, 110, 110, 20]);
    // 配置对象
    const getOption = (sal, sto) => {
        return {
            tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            legend: {
                orient: 'vertical',
                left: 'left',
                textStyle: {
                    fontSize: 13,
                    color: '#FFFFFF',
                },
                data: ['重启', '找人帮忙', '放弃使用', '想法修复']
            },
            series: [
                {
                    name: '访问来源',
                    type: 'pie',
                    radius: '55%',
                    center: ['50%', '60%'],
                    data: [
                        { value: 1835, name: '重启' },
                        { value: 310, name: '找人帮忙' },
                        { value: 234, name: '放弃使用' },
                        { value: 135, name: '想法修复' }
                    ],
                    itemStyle: {
                        emphasis: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        }
    };
 
    return (
        <div>
            <ReactEcharts option={getOption(sales, stores)} style={{marginTop:"30px", width: '500px'}} />
        </div>
    )
}
 
export default BingEch